<template class="rootview" >
  <!-- 领料单下的物料列表 -->
  <div class="colorRootview">
    <!-- 标题栏 -->
    <van-nav-bar class="transparent-bar" id="nav" @click-left="onBackClick" :border="false">
      <font color="#ffffff" slot="title">出库</font>
      <van-icon name="arrow-left" color="white" :size="30" slot="left" />
    </van-nav-bar>
    <div class="nameTitleBg">
      <div class="titleIcon"></div>
      <van-cell
        style="background-color:transparent;margin: 0;padding:0"
        value-class="nameTitleText"
        value="物料信息"
        :border="false"
      />
    </div>

    <van-cell-group class="detailCard" :border="false">
      <van-cell
        title="编号"
        :value="code"
        title-class="cellTitle"
        value-class="cellValue"
        :border="false"
      ></van-cell>
      <van-cell
        title="物料名称"
        :value="name"
        title-class="cellTitle"
        value-class="cellValue"
        :border="false"
      ></van-cell>
      <van-cell
        title="批号"
        title-width="74"
        :value="batchCode?batchCode:'暂无'"
        value-class="cellValue"
        title-class="cellTitle"
        :border="false"
      />
      <van-cell
        title="存储位置"
        title-width="74"
        :value="shelveNames?shelveNames:'暂无'"
        value-class="cellValue"
        title-class="cellTitle"
        :border="false"
      />
      <van-cell
        title="领取/出库"
        title-width="74"
        value-class="cellValue"
        title-class="cellTitle"
        :border="false"
      >{{selectNums}}/{{count}}</van-cell>
      <van-cell
        title="领取人"
        title-width="74"
        value-class="cellValue"
        title-class="cellTitle"
        :border="false"
        :value="applyUserName"
      ></van-cell>
      <van-cell
        title="领取备注"
        title-width="74"
        value-class="cellValue"
        title-class="cellTitle"
        :border="false"
        :value="applyRemark"
      ></van-cell>
    </van-cell-group>
    <div class="footer" v-if="state==1">
      <van-button
        class="scanBtn"
        round
        type="default"
        @click="scan"
        style="width:80px;height:80px"
      >扫</van-button>
      <div class="split"></div>
      <van-button class="roundButton" round type="default" @click="rejectStorageOutConfirm">拒绝</van-button>
      <van-button
        class="roundButton"
        round
        type="default"
        @click="submitStorageOutConfirm"
        :disabled="selectNums<count"
      >提交</van-button>
    </div>

    <!-- <van-dialog
      v-model="rejectDialogShow"
      title="确认拒绝吗?"
      show-cancel-button
      show-confirm-button
      @confirm="rejectStorageOut"
    >
      <van-field v-model="rejectRemark" label="拒绝理由" placeholder="请输入" />
    </van-dialog>

    <van-dialog
      v-model="submitDialogShow"
      title="确认提交吗?"
      show-cancel-button
      show-confirm-button
      @confirm="submitStorageOut"
    >
      <van-field v-model="rejectRemark" label="提交备注" placeholder="请输入" />
    </van-dialog>-->
  </div>
</template>

<script>
import http from "@/utils/request";
import api from "@/utils/api";
import { Dialog } from "vant";
import Toast from "@/utils/toast";

export default {
  name: "OutOfStorage",
  data() {
    return {
      applyCode: 0, //领料单单号
      applyUserName: "", //领料人
      outOfStorageId: 0, //出库单ID
      nums: 0, //库存数量
      count: 0, //出库数量
      selectNums: 0, //已扫码的数量
      name: "", //名字
      // prodBatchCode: "", //批号
      shelveNames: "", //货架
      code: "", //code
      batchCode: "", //批号
      applyRemark: "", //领料备注
      shelveArray: [], //存储位置
      state: 0, //状态
      // outOfStorageDetail: {
      //   outOfStorageId: "", //出库单ID
      //   nums: 0, //库存数量
      //   count: 0, //出库数量
      //   selectNums: 0, //已扫码的数量
      //   name: "", //名字
      //   prodBatchCode: "", //批号
      //   shelveName: "" //货架
      // }, //出库明细
      barCode: [], //扫码到的条形码
      // rejectDialogShow: false,
      // submitDialogShow: false,
      rejectRemark: "",
      submitRemark: ""
    };
  },
  methods: {
    onBackClick() {
      // this.$router.push({ path: "/main", query: { active: "outOfStock" } });
      this.$router.push({
        path: "/outOfStorageList",
        query: {
          applyCode: this.applyCode
        }
      });
    },
    checkBeforeScan() {
      if (this.selectNums >= this.count) {
        Toast.toast("已达到最大出库数量！", false);
        return false;
      } else {
        return true;
      }
    },
    scan() {
      //已扫码的数量不能大于出库数量
      if (checkBeforeScan()) {
        android.scan();
      }
      console.log("scanClick");
    },
    //让用户确认出库
    submitStorageOutConfirm() {
      if (this.selectNums < this.count) {
        Toast.toast("领取数量不够！", false);
      } else {
        // this.submitDialogShow = true;
        Dialog.confirm({
          title: "提交",
          message: "确认提交吗？"
        })
          .then(() => {
            // on confirm
            this.submitStorageOut();
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    //提交出库单
    submitStorageOut() {
      console.log("storageOut");
      let params = {
        outStorageId: this.outOfStorageId,
        bars: this.barCode,
        isConfirm: false,
        remark: this.submitRemark
      };
      http
        .fetchPost(api.outOfStorageSubmit, params)
        .then(data => {
          Toast.toast("提交成功");
          this.onBackClick();
        })
        .catch(err => {});
    },
    //让用户确认拒绝出库
    rejectStorageOutConfirm() {
      // this.barCodeScanOutStorage("20190708000001");
      // this.rejectDialogShow = true;
      Dialog.confirm({
        title: "拒绝出库",
        message: "确认拒绝吗？"
      })
        .then(() => {
          // on confirm
          this.rejectStorageOut();
        })
        .catch(() => {
          // on cancel
        });
    },
    rejectStorageOut() {
      console.log("rejectStorageOut");
      let params = {
        outStorageId: this.outOfStorageId,
        remark: this.rejectRemark,
        isConfirm: true
      };
      http
        .fetchPost(api.outOfStorageSubmit, params)
        .then(data => {
          Toast.toast("拒绝成功");
          this.onBackClick();
        })
        .catch(err => {});
    },
    barCodeValid(code) {
      let params = {
        outStorageId: this.outOfStorageId,
        barCode: code
      };
      http
        .fetchGet(api.outOfStorageBarCodeValid, params, "正在校验条形码")
        .then(data => {
          this.barCode.push(code);
          this.selectNums++;
          Toast.toast("校验成功");
          if (data) {
            this.shelveArray.push(data.shelveName);
            this.shelveNames = this.shelveArray.join(";");
          }
        })
        .catch(err => {});
    },
    barCodeScanOutStorage(code) {
      if (!checkBeforeScan()) {
        return;
      }
      let isDuplicate = false;
      for (var i = 0; i < this.barCode.length; i++) {
        if (this.barCode[i] == code) {
          isDuplicate = true;
          break;
        }
      }
      if (isDuplicate) {
        Toast.toast("重复的条形码", false);
      } else {
        this.barCodeValid(code);
      }
    }
  },
  created() {
    this.outOfStorageId = this.$route.query.id;
    this.nums = this.$route.query.nums;
    this.count = this.$route.query.count;
    this.selectNums = this.$route.query.selectNums;
    this.name = this.$route.query.name;
    this.code = this.$route.query.code;
    this.batchCode = this.$route.query.batchCode;
    // if (!this.batchCode) {
    //   this.batchCode = "暂无";
    // }
    this.applyRemark = this.$route.query.applyRemark;
    this.state = this.$route.query.state;
    this.applyUserName = this.$route.query.applyUserName;
    this.applyCode = this.$route.query.applyCode;
    let params = { outStorageId: this.outOfStorageId };
    http
      .fetchGet(api.outOfStorageDetail, params)
      .then(data => {
        //批号都一样
        // this.prodBatchCode = data[0].prodBatchCode;
        // if (!this.prodBatchCode) {
        //   this.prodBatchCode = "";
        // }
        //存储位置有很多，去重

        data.forEach(currentValue => {
          if (this.shelveArray.indexOf(currentValue.shelveName) == -1) {
            this.shelveArray.push(currentValue.shelveName);
          }
        });
        if (this.shelveArray.length > 0) {
          this.shelveNames = this.shelveArray.join(";");
        }
      })
      .catch(err => {});

    window.barCodeScanOutStorage = this.barCodeScanOutStorage;
  },
  beforeDestroy() {
    window.barCodeScanOutStorage = null;
  }
};
</script>
<style lang="scss" scoped>
.transparent-bar {
  border: false;
  background-color: transparent;
}
.nameTitleBg {
  margin-left: 25px;
  margin-top: 10px;
  margin-bottom: 10px;
  width: auto;
  display: flex;
  flex-direction: row;
  background-color: transparent;
  color: white;
}
.nameTitleText {
  font-weight: 800;
  color: white;
  background-color: transparent;
}
.titleIcon {
  width: 3px;
  background-color: white;
  height: 15px;
  margin: auto;
  margin-right: 10px;
}
.colorRootview {
  width: 100%;
  height: 100%;
  background: url("../../assets/bg.png") no-repeat center center;
  position: fixed;
  background-size: cover;
}
.detailCard {
  border: 1px solid #cccccc;
  border-radius: 10px;
  box-shadow: 2px 4px 10px #aaaaaa;
  padding: 5px;
  background-color: white;
  width: auto;
  margin-left: 10px;
  margin-right: 10px;
}
.textLeft {
  text-align: left;
}

.van-cell__title {
  width: 30%;
  flex: none;
}

.cellTitle {
  text-align: left;
  color: #7542de;
  background: transparent;
}

.cellValue {
  text-align: left;
  background: transparent;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
}

.van-cell {
  margin: 5px;
  padding: 5px 5px 5px 5px;
}

.nameTitleBg {
  margin-left: 15px;
}

.roundButton {
  /* width: 100%;
  margin: 10px;
  height: 40px;
  border-radius: 20px;
  border-style: none;
  background-color: white;
  color: #704ae0; */
  width: 40%;
  color: #704ae0;
  margin: 10px;
}
.split {
  height: 1px;
  width: 100%;
  background-color: white;
  margin: auto;
}
.footer {
  position: fixed;
  bottom: 0px;
  width: 100%;
  /* height: h px; */
}
.scanBtn {
  color: white;
  background: url("../../assets/scanBtn.png") no-repeat center center;
  background-size: cover;
  margin: auto;
  margin-bottom: 10px;
}
.van-cell {
  padding: 0;
}
</style>
